<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>美化后的表单</title>
    <link rel="stylesheet" href="../../../dest/css/fui.css">
    <style>
        .fui-form{
            padding: 20px;
            border: 1px solid #eee;
            margin: 50px auto;
            width:500px;
        }
    </style>
</head>
<body>
<div class="fui-form">
    <form action="" class="demo">
        <div class="form-item">
            <label for="" class="form-item-label">姓名：</label>
            <div class="form-item-block">
                <input type="text" class="form-item-input" placeholder="请输入姓名" name="name">
            </div>
        </div>
        <div class="form-item">
            <label for="" class="form-item-label">密码：</label>
            <div class="form-item-block">
                <div class="form-item-inline">
                    <input type="password" class="form-item-input" placeholder="请输入密码" name="password">
                </div>
                <div class="form-item-aux">必须为字母和数字组合</div>
            </div>
        </div>
        <div class="form-item">
            <label for="" class="form-item-label">性别：</label>
            <div class="form-item-block">
                <div class="form-item-radio fui-radio-checked" fm-name="sex" fm-value="1">
                    <i class="fui-font fui-font-radio"></i>
                    <span>男</span>
                </div>
                <div class="form-item-radio" fm-name="sex" fm-value="2">
                    <i class="fui-font fui-font-radio"></i>
                    <span>女</span>
                </div>
                <input type="hidden" name="sex" value="1">
            </div>
        </div>
        <div class="form-item">
            <label for="" class="form-item-label">爱好：</label>
            <div class="form-item-block">
                <div class="form-item-checkbox">
                    <span>写作</span>
                    <i class="fui-font fui-font-checkbox"></i>
                    <input type="checkbox" name="like" hidden value="write">
                </div>
                <div class="form-item-checkbox">
                    <span>阅读</span>
                    <i class="fui-font fui-font-checkbox"></i>
                    <input type="checkbox" name="like" hidden value="read">
                </div>
                <div class="form-item-checkbox">
                    <span>无理取闹</span>
                    <i class="fui-font fui-font-checkbox"></i>
                    <input type="checkbox" name="like" hidden value="unreasonable">
                </div>
            </div>
        </div>
        <div class="form-item">
            <label for="" class="form-item-label">公开：</label>
            <div class="form-item-block">
                <div class="form-item-switch" fm-switch="OFF|ON" fm-value="0|1">
                    <span>OFF</span>
                    <input type="text" value="0" name="public" hidden>
                </div>
            </div>
        </div>
        <div class="form-item">
            <label for="" class="form-item-label">城市：</label>
            <div class="form-item-block">
                <div class="form-item-select">
                    <div class="form-select-title">
                        <input type="text" readonly placeholder="请选择城市" class="form-item-input">
                    </div>
                    <ol class="form-select-option" fm-name="city">
                        <li fm-value="1">北京</li>
                        <li fm-value="2">上海</li>
                        <li fm-value="3">南京</li>
                        <li fm-value="4">天津</li>
                        <li fm-value="5">武汉</li>
                        <li fm-value="6">孝感</li>
                        <li fm-value="7">汉川</li>
                        <li fm-value="8">浙江</li>
                    </ol>
                    <input type="hidden" name="city">
                </div>
            </div>
        </div>
        <div class="form-item">
            <label for="" class="form-item-label">备注：</label>
            <div class="form-item-block">
                <textarea name="remark" class="form-item-textarea"></textarea>
            </div>
        </div>
        <div class="form-item">
            <div class="form-item-block">
                <a href="javascript:demo();" class="form-submit">提交</a>
                <a href="javascript:;" class="form-cancel">取消</a>
            </div>
        </div>
    </form>
</div>

<script src="../js/jquery.min.js"></script>
<script src="../js/JsForm.js"></script>
<script>
    JsForm().skin();
    var demo=function(){
        JsForm('.demo').submit(function(r){
            console.log(r);
        },1)
    }
</script>
</body>
</html>
